<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/EmergencyResponselist' }">响应命令</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">响应命令详情
            <el-steps :active="active" finish-status="success" align-center>
              <el-step title="编辑" description="2021-08-12 09:51:00"></el-step>
              <el-step title="审批" description="2021-08-12 09:52:00"></el-step>
              <el-step title="发布" description="2021-08-12 09:52:05"></el-step>
              <el-step title="终止" description=""></el-step>
            </el-steps>
          </div>
          <div class="InformationDetail-btn">
            <el-row>
              <el-button size="mini" @click="back">返回</el-button>
            </el-row>
          </div>
        </div>
        <div class="EmergencyDetail-zt">
          <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
            <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" />
            <div slot="slot2">
              <LsdTable slot="cxyq" :paginationAtrrs="paginationAtrrs" :compRef="tableList.compRef" ref="gjxm" :columns="tableList.columns" :tableData="tableList.tableData" :tableAttr="tableList.tableAttr" :isSequenceFlag="tableList.isSequenceFlag" @onActionClick="onActionClick1111" />
            </div>
            <div slot="slot3">
              <DialogForm ref="formComponent2" :formConfig="formConfig2" />
            </div>
            <div slot="slot4">
              <DialogForm ref="formComponent3" :formConfig="formConfig3" />
            </div>
            <div slot="slot5">
              <DialogForm ref="formComponent4" :formConfig="formConfig4" />
            </div>
          </LsdDialogTitle>
          <!-- <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">基本信息</div>
              </div>
              <div class="card">
                <div class="content">
                  <p>响应命令单：{{form.responseName}}</p>
                  <p>响应研判单：{{form.judgeName}}</p>
                  <el-row :gutter="12" justify="start" align="top">
                    <el-col :span="12">
                      <p>事件类别：{{form.eventName}}</p>
                      <p>影响范围: {{form.effectRange}}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>响应级别：{{form.responseLvName}}</p>
                      <p>影响时间：{{form.effectTime}}</p>
                    </el-col>
                  </el-row>
                  <p>事件概要：{{form.incidentOutline}}</p>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">措施要求</div>
              </div>
              <div class="card">
                <div class="content">
                  <el-row :gutter="12" justify="start" align="top" style="margin-top:20px">
                    <el-col :span="4">
                      <p>有关措施要求：</p>
                    </el-col>
                    <el-col :span="20">
                      <el-table :data="form.emergencyMeasureListVos" border>
                        <el-table-column type="index" label="序号" width="50">
                        </el-table-column>
                        <el-table-column prop="measureRequire" label="有关措施要求" min-width="100px">
                        </el-table-column>
                        <el-table-column prop="unitDeptName" label="部门/单位" width="80">
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">响应信息</div>
              </div>
              <div class="card">
                <div class="content">
                  <p>主送单位：{{form.mainUnitId}}</p>
                  <p>响应部门：{{form.responseDeptId}}</p>
                  <p>联系人：{{form.linkman}}</p>
                  <el-row :gutter="12" justify="start" align="top">
                    <el-col :span="12">
                      <p>抄报：{{form.outTheNewspaper}}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>抄送：{{form.sendDuplicate}}</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">填报信息</div>
              </div>
              <div class="card">
                <div class="content">
                  <el-row :gutter="12" justify="start" align="top">
                    <el-col :span="8">
                      <p>填报人：{{tbxxform.tbr}}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>单位及部门：{{tbxxform.dwjbm}}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>填报时间：{{tbxxform.tbsj}}</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="5">
              <div slot="title" class="flex">
                <div class="leftLine"></div>
                <div class="fontSize16">审批信息</div>
              </div>
              <div class="card">
                <div class="content">
                  <el-row :gutter="12" justify="start" align="top">
                    <el-col :span="2">
                      <p>意见：</p>
                    </el-col>
                    <el-col :span="22">
                      <p>{{spxxform.yj}}</p>
                    </el-col>
                  </el-row>
                  <el-row :gutter="12" justify="start" align="top">
                    <el-col :span="8">
                      <p>审批人：{{spxxform.spr}}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>单位及部门：{{spxxform.dwjbm}}</p>
                    </el-col>
                    <el-col :span="8">
                      <p>审批时间：{{spxxform.spsj}}</p>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
// import { detailList } from "@/api/EarlyWarningManagement/yjtzd"
import {
  getinfo,
  getjudgelist
} from "@/api/EmergencyDisposal/xymld";
export default {
  name: "EmergencyResponseinfo",
  components: { TimeLine },
  data() {
    return {
      // 弹窗表单信息
      formConfig4: {
        disabled: true,
        formData: [
          {
            type: "input",
            label: "审批意见",
            prop: "emergencyEvent",
            class: "sjgy",
            lableWidth: "100px",
            option: []
          },
          {
            type: "input",
            label: "审批人",
            prop: "eventName",
            class: "third",
            disabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "eventLvName",
            class: "third",
            disabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "审批时间",
            prop: "effectRange",
            class: "third",
            disabled: true,
            lableWidth: "120px"
          }

        ]
      },
      formConfig3: {
        disabled: true,
        formData: [
          // {
          //   type: "select",
          //   label: "应急事件",
          //   prop: "emergencyEvent",
          //   class: "sjgy",
          //   lableWidth: "100px",
          //   option: []
          // },
          {
            type: "input",
            label: "填报人",
            prop: "creator",
            class: "third",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "createDeptName",
            class: "third",
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "填报时间",
            prop: "createTime",
            class: "third",
            lableWidth: "120px"
          }
        ]
      },
      // 弹窗表单信息
      formConfig2: {
        disabled: true,
        formData: [
          {
            type: "select",
            label: "主送单位",
            prop: "mainUnitId",
            dic: "mainUnitId",
            class: "sjgy",
            lableWidth: "120px",
            isShow: true,
            option: [
              {
                value: "1",
                label: "国网随电公司"
              },
              {
                value: "2",
                label: "国网随州供电公司公司"
              },
              {
                value: "3",
                label: "国网公司"
              }
            ]
          },
          {
            type: "select",
            label: "响应部门",
            prop: "responseDeptId",
            dic: "dic_xybm",
            class: "sjgy",
            lableWidth: "120px",
            isShow: true,
            option: [
              {
                value: "1",
                label: "办公室"
              },
              {
                value: "2",
                label: "设备部"
              },
              {
                value: "3",
                label: "安监部"
              }
            ]
          },
          {
            type: "select",
            label: "联系人",
            prop: "linkman",
            dic: "dic_lxr",
            class: "sjgy",
            lableWidth: "120px",
            isShow: true,
            option: [
              {
                label: "专项应急办: 俞斌137888802",
                value: "专项应急办: 俞斌137888802"
              },
              {
                label: "专项应急办: 付婧1384665802",
                value: "专项应急办: 付婧1384665802"
              },
              {
                label: "专项应急办: 赵爱国1569858802",
                value: "专项应急办: 赵爱国1569858802"
              }
            ]
          },
          {
            type: "select",
            label: "抄报",
            prop: "outTheNewspaper",
            dic: "dic_cb",
            class: "half",
            lableWidth: "120px",
            isShow: true,
            option: [
              {
                value: "1",
                label: "湖北省应急厅"
              },
              {
                value: "2",
                label: "湖北省能源厅"
              }
            ]
          },
          {
            type: "select",
            label: "抄送",
            prop: "sendDuplicate",
            dic: "dic_cs",
            class: "half",
            lableWidth: "120px",
            isShow: true,
            option: [
              {
                value: "1",
                label: "国网湖北省电力有限公司"
              },
              {
                value: "2",
                label: "国网湖北省电力有限公司安监部"
              }
            ]
          }
        ]
      },
      tableList: {
        isSelectFlag: true,
        compRef: "cxyq",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "响应命令单列表",
        actions: [],
        tableData: [
          {
            measureRequire: "",
            dutyDeptId: ""
          }
        ],
        columns: [
          {
            prop: "measureRequire",
            label: "有关措施要求",
            align: "center",
            "min-width": "200px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "input",
                      id: "measureRequire",
                      label: "有关措施要求",
                      attrs: {
                        // disabled:
                        //   _this.operat === "review" ||
                        //   !["task999"].includes(_this.$route.query.task) ||
                        //   ["task2", "task3"].includes(
                        //     _this.$route.query.returnFlow
                        //   ),
                        disabled: false,
                        value: "",
                        placeholder: "请输入",
                        min: 0,
                        type: "text"
                      }
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          },
          {
            prop: "unitDeptId",
            label: "部门/单位",
            align: "center",
            "min-width": "70px",
            render: (h, { row }) => {
              return (
                <div class='peizhi'>
                  <LsdForm
                    compData={{
                      elType: "select",
                      id: "unitDeptId",
                      label: "部门/单位",
                      // dic: "dic_zrbm",
                      attrs: {
                        value: "",
                        clearable: true,
                        filterable: true,
                        disabled: false,
                        multiple: false,
                        "collapse-tags": true
                      },
                      options: this.dwjbmlist
                      // [
                      // {
                      //   label: "111",
                      //   value: 1
                      // },
                      // {
                      //   label: "222",
                      //   value: 2
                      // },
                      // {
                      //   label: "333",
                      //   value: 3
                      // }
                      // ]
                    }}
                    form={row}
                    {...{
                      on: {}
                    }}
                  ></LsdForm>
                </div>
              );
            }
          }
        ],
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      paginationAtrrs: {
        total: 0,
        layout: "total, sizes, prev, pager, next, jumper",
        "current-page": 1,
        "page-size": 10,
        "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      // 弹窗表单信息
      formConfig: {
        disabled: true,
        formData: [
          {
            type: "select",
            label: "响应研判单",
            prop: "judgeId",
            dic: "judgeId",
            class: "sjgy",
            lableWidth: "100px",
            isShow: true,
            option: []
          },
          {
            type: "input",
            label: "响应命令单",
            prop: "responseName",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "事件类别",
            prop: "eventName",
            class: "half",
            isDisabled: true,
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "影响范围",
            prop: "effectRange",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "input",
            label: "响应级别",
            prop: "responseLvName",
            class: "half",
            isDisabled: true,
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "影响时间",
            prop: "effectTime",
            class: "half",
            isDisabled: true,
            lableWidth: "120px"
          },
          {
            type: "textarea",
            label: "事件概要",
            prop: "incidentOutline",
            class: "sjgy",
            isDisabled: true,
            lableWidth: "100px"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "措施要求",
          name: "2",
          slot: "slot2"
        },
        {
          title: "响应信息",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        },
        {
          title: "审批信息",
          name: "5",
          slot: "slot5"
        }
      ],
      activeNames: ["1", "2", "3", "4", "5"],
      active: 3,
      activities: [
        {
          content: "应急事件上报",
          timestamp: "2021-08-12 08:10:00"
        },
        {
          content: "灾情统计",
          timestamp: "2021-08-12 09:45:00"
        },
        {
          content: "响应研判",
          timestamp: "2021-08-12 09:50:00"
        },
        {
          content: "响应命令单发布",
          timestamp: "2021-08-12 09:52:05",
          color: "rgb(37, 109, 252)"
        }
      ],
      dwjbmlist: [
        {
          value: "1",
          label: "办公室"
        },
        {
          value: "2",
          label: "设备部"
        },
        {
          value: "3",
          label: "安监部"
        }
      ],
      spxxform: {
        yj: "同意!",
        spr: "朱望林",
        dwjbm: "国网湖北省电力有限公司",
        spsj: "2021-08-12 09:52:00"
      },
      tbxxform: {
        tbr: "赵爱国",
        dwjbm: "国网湖北省电力有限公司安监部",
        tbsj: "2021-08-12 09:51:00"
      },
      cslist: [],
      cblist: [],
      lxrlist: [],
      xybmlist: [],
      zsdwlist: [],
      form: {},
      tableData: []
    };
  },
  mounted() {
    this.getinfo();
    this.getInputVal();
  },
  methods: {
    // 获取下拉框数据
    getInputVal() {
      this.formConfig.formData.forEach((item) => {
        if (item.dic) {
          getjudgelist().then(res => {
            const option = res.map((item) => {
              return {
                label: item.judgeName,
                value: item.id
              };
            });
            item.option = option;
          });
        }
      });
    },
    onActionClick1111() { },
    back() {
      this.$router.back();
    },
    async getinfo() {
      const res = await getinfo({ id: Number(this.$route.query.id) });
      console.log(res);
      this.$set(this.$refs.formComponent, "form", res);
      this.$set(this.$refs.formComponent2, "form", res);
      this.tableList.tableData = res.emergencyMeasureListVos;
      this.$set(this.$refs.formComponent3, "form", res);
      this.$set(this.$refs.formComponent4, "form", res);
      this.form = res;
    }
  }
};
</script>

<style scoped lang="less">
@import '../../../../assets/style/ComponentStyle.less';
.EmergencyDetail {
  width: 100%;
  height: 100%;
  :deep(.el-timeline) {
    width: 85%;
    margin-left: 35px;
    margin-top: 30px;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }
  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }
  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;
      // padding: 0 10px;
      .EmergencyDetail-titel {
        width: 98%;
        margin: 0 auto;
        position: relative;
        padding: 20px 0;
        border-bottom: solid 1px #ccc;
        .EmergencyDetail-top {
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 400;
          font-style: normal;
          font-size: 28px !important;
        }
        .InformationDetail-btn {
          position: absolute;
          right: 5px;
          bottom: 5px;
          text-align: right;
        }
      }
      .EmergencyDetail-zt {
        width: 98%;
        height: 78%;
        overflow-y: auto;
        margin: 0 auto;
      }
    }
  }
}
</style>
